<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getUsers } from '@/api/modules/ad'
const list = ref<any[]>([]) // 用于渲染的列表，包含克隆项
const scrollContainer = ref<HTMLElement>()
const itemHeight = ref(48) // 初始默认高度，后续会动态测量
const isTransitioning = ref(false)
const emit = defineEmits(['submit'])
const submit = async () => {
  emit('submit')
}
const getRandomInt = (min:number, max:number) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};



const measureItemHeight = () => {
  // 测量实际的item高度
  if (scrollContainer.value) {
    const firstItem = scrollContainer.value.querySelector('.item')
    if (firstItem) {
      const rect = firstItem.getBoundingClientRect()
      itemHeight.value = rect.height + 10 // 加上margin-bottom
    }
  }
}

const startScroll = () => {
  // 使用递归的setTimeout代替setInterval，实现每次随机时间间隔
  const scrollNext = () => {
    if (isTransitioning.value) {
      // 如果正在过渡中，延迟后重试
      setTimeout(scrollNext, 100)
      return
    }
    
    isTransitioning.value = true
    
    // 向上滚动一个item的高度
    const container = scrollContainer.value
    if (container) {
      const currentScrollTop = container.scrollTop
      const targetScrollTop = currentScrollTop + itemHeight.value
      
      // 检查是否已经滚动到最后可以显示的位置（显示最后两条数据）
      const maxScrollTop = (list.value.length - 2) * itemHeight.value
      const finalScrollTop = Math.min(targetScrollTop, maxScrollTop)
      
      container.scrollTo({
        top: finalScrollTop,
        behavior: 'smooth'
      })
      
      // 滚动结束后检查是否需要继续
      setTimeout(() => {
        isTransitioning.value = false
        
        // 只有当没有滚动到最大位置时，才继续滚动
        if (finalScrollTop < maxScrollTop) {
          // 计算下一次随机时间间隔
          const nextDelay = getRandomInt(1, 4) * 1000
          setTimeout(scrollNext, nextDelay)
        }
      }, 500) // 滚动动画时长
    }
  }
  
  // 开始滚动
  scrollNext()
}
const getList=async ()=>{
  const res=await getUsers(getRandomInt(100,150))
  if(res.code===0){
    const temp=res.data.map((item:any)=>({...item,few:getRandomInt(1,3)}))
    list.value = [...temp]
    // 在下一个渲染周期测量item高度并开始滚动
    setTimeout(() => {
      measureItemHeight()
      startScroll()
    }, 100)
  }
}
onMounted(()=>{
    getList()
    
})
</script>

<template>
    <div class="group_buy">
        <div class="t">这些人刚刚发起拼团，可直接参团</div>
        <div class="l" ref="scrollContainer">
            <div class="item" v-for="(item,idx) in list" :key="item.cloneId || idx">
                <div class="avatar"><img :src="item.avatar" alt=""></div>
                <div class="name">{{item.nickName}}</div>
                <div class="iIn">
                    <div class="iIn_t">还差<span>{{item.few}}</span>参团</div>
                    <div class="iIn_b">剩余</div>
                </div>
                <div class="l_r">
                    <div class="b" @click="submit">去参团</div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<style scoped lang="scss">
.group_buy {
    height: auto;
    overflow: hidden;
    padding: 20px 15px 20px;
    .t{
        font-size: 16px;
        line-height: 18px;
        font-weight: 500;
        color: #333;
    }
    .l{
        height: 84px; // 固定高度，只显示两个item
        overflow: hidden;
        margin-top: 15px;
        // 隐藏滚动条
        scrollbar-width: none; // Firefox
        &::-webkit-scrollbar {
            display: none; // Chrome, Safari, Edge
        }
        // 添加过渡效果
        scroll-behavior: smooth;
        .item{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            &:last-child{
                margin-bottom: 0;
            }
            .avatar{
                width: 28px;
                height: 28px;
                border-radius: 50%;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    vertical-align: top;
                }
            }
            .name{
                font-size: 14px;
                line-height: 28px;
                color: #333;
                flex: 1;
            }
            .iIn{
                font-size: 12px;
                line-height: 14px;
                color: #999;
                margin-right: 0.2rem;
                width: 100px;
                .iIn_t{
                    color: #333;
                    margin-top: 5px;
                }
                .iIn_b{
                    margin-top: 3px;
                }
                span{
                    color: #d32602;
                    padding: 0 3px;
                }
            }
            .l_r{
                font-size: 12px;
                color: #fff;
                line-height: 26px;
                background: #d32602;
                padding: 0 10px;
                border-radius: 4px;
            }
        }
    }
  
}

</style>